<template>
	<view class="wrapper">
		<image src="../../static/denglu1.png" mode="aspectFill" class="top"></image>
		<div class="colum box1 mb40 posr">
			<image src="../../static/logo.jpg" mode="aspectFill" class="avatar mb20"></image>
			<div class="cfff fbold f28">电影票兑换</div>
		</div>
		<div class="box2 posr">
			<div class="mb50">
				<div class="f32 fbold mb30 ml30">手机号</div>
				<input maxlength="11" type="number" placeholder="请输入手机号" placeholder-style="color:#CFCFCF" class="phone"
					v-model="phone" />
			</div>
			<div class="mb50">
				<div class="f32 fbold mb30 ml30">验证码</div>
				<div class="phone space-between">
					<input type="number" placeholder="请输入手机验证码" placeholder-style="color:#CFCFCF" v-model="code" />
					<div class="text1 f24" @click="getPhoneVcode" v-if="time==60">获取验证码</div>
					<div class="text1 f24" v-else>{{time}}</div>
				</div>
			</div>
			<!-- <div class="f22 center mb50">还没有账户？<span class="text1">注册</span></div> -->
			<div class="f30 center btn cfff" @click="submit">登录</div>
			
			<div class="f30 center btn  cfff mt10" >
				<button class="wc"  open-type="getPhoneNumber" @getphonenumber="getphonenumber">
				 快捷登录
				</button>
			</div>
		</div>
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				time: 60,
				list: {}
			}
		},
		onLoad() {
			
		},
		methods: {
			// 小程序授权获取手机号
			getphonenumber(e){
				if(e.detail.code){
					this.$http('/api/weChat/getPhoneNum',{
						code: e.detail.code
					}).then((r) =>{
						this.getweChatlogin(r.data)
					})
				}
			
			},
			// 小程序授权登录
			getweChatlogin(phone){
				let that = this
				uni.login({
					provider: 'weixin',
					success: res =>{
						that.$http('/api/weChat/login',{
							phone: phone,
							code: res.code
						},true,'POST').then((r) =>{
							console.log(r)
							uni.setStorageSync('uInfo',r.data)
							uni.navigateBack()
						})
					}
				})
			},
			
			// 跳转到首页
			submit() {
				const phoneReg = /^1[3456789]\d{9}$/;
				if (!phoneReg.test(this.phone)) {
					this.sToast('请输入正确手机号')
					return
				}
				if (this.code == '') {
					this.sToast('请输入验证码')
					return
				}
				uni.showLoading({
					title: '正在登录中'
				})

				this.$http('/api/loginByPhone', {
					phone: this.phone,
					code: this.code
				}, true, 'POST').then((r) => {
					uni.setStorageSync('uInfo', r.data)
					uni.navigateBack()
				})
			},
			// 发送验证码
			getPhoneVcode() {
				const phoneReg = /^1[3456789]\d{9}$/;
				if (!phoneReg.test(this.phone)) {
					this.sToast('请输入正确手机号')
					return
				}
				uni.showLoading({
					title: '正在发送中'
				})
				this.$http('/api/getPhoneVcode', {
					phone: this.phone
				}).then(r => {
					uni.hideLoading()
					this.setTime()
				})
			},
			setTime() {
				let that = this
				if (this.time == 0) {
					this.time = 60
					return
				}
				this.time--
				setTimeout(() => {
					that.setTime()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background: #F5F6F7;

		button {
			background: none;

			&::after {
				display: none;
			}
		}

		.top {
			width: 100%;
			height: 554rpx;
		}

		.box1 {
			margin-top: -370rpx;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 1rpx solid #F6EBEB;
			}
		}

		.box2 {
			margin: 0 auto;
			padding: 70rpx 30rpx;
			width: 703rpx;
			background: #FFFFFF;
			box-shadow: 5rpx 0rpx 16rpx 0rpx #F1E5E0;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.phone {
				width: 600rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx #FDE9EA;
				border-radius: 13rpx 13rpx 13rpx 13rpx;
				border: 1rpx solid #FDE9EA;
				padding: 0 50rpx 0 50rpx;
			}

			.text1 {
				color: #FF5555;
			}

			.btn {
				width: 573rpx;
				height: 90rpx;
				background: linear-gradient(to right, #FF5858, #F857A5);
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				margin: 0 auto;
			}
		
			.mt10 {  
				margin: 15rpx auto;
				background: linear-gradient(to right, #ffffff, #ffffff);
				border: 1rpx solid #FDE9EA;
				// padding-top: 8rpx;
				// padding-bottom: 8rpx;
				
			}
			.wc {
				color: #000000;
				background-color: #ffffff;
				width: 533rpx; 
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				height: 85rpx;
				font-size: 30rpx;
			}
		}

		.bottom {
			margin-top: 100rpx;

			.line {
				width: 126rpx;
				height: 1rpx;
				background: #D3D3D3;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.logo {
				width: 79rpx;
				height: 66rpx;
			}
		}

	}
</style>